<template>
  <div id="search">
    <div id="logo">
      <v-img :src="logo"></v-img>
    </div>
    <div id="search-box">
      <input id="search-input" autocomplete="off" type="text" value="" placeholder="请输入关键字"/>
      <button id="search-button"><i></i><span style="color: white;margin-left: 2vw;font-family: Microsoft YaHei;font-size: 13px">搜索</span></button>
    </div>
  </div>
</template>

<script>
import logoImageUrl from '@/assets/logo/logo.svg'

export default {
  name: "Search",
  comments: {
    logoImageUrl
  },
  data() {
    return {
      logo: logoImageUrl
    }
  }
}
</script>

<style scoped>
#search {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 8vh;
  display: flex;
  align-items: center;
  background: rgb(254 101 82);;
  padding: 0 2vh;
  justify-content: space-between
;
}

#logo {
  width: 10vw;
  height: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2vw;
}

#search-box {
  font-size: 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  margin-left:1.7vh
}

input {
  padding: 1vw 2vw 1vw 5vw;
  /* width: 60vw; */
  border-radius: 2vh;
  outline: none;
  color: white;
  background-color: rgb(254 101 82);
  font-family: Microsoft YaHei;
  flex: 1;
  margin-right: 1.7vh;
}

input::-ms-input-placeholder{text-align: center;}
input::-webkit-input-placeholder{text-align: center;}

input::-webkit-input-placeholder {
  color: salmon;
}
input:-moz-placeholder {
  /* FF 4-18 */
  color: salmon;
}
input::-moz-placeholder {
  /* FF 19+ */
  color: salmon;
}
input:-ms-input-placeholder {
  /* IE 10+ */
  color: salmon;
}
</style>